<template>
    <div class="">
        <div class="container">
            <el-tabs v-model="activeName" class="box-card">
                <!-- 登录日志 -->
                <el-tab-pane :label="`登录日志`" name="first">
                <!-- 搜索区域 -->
                    <div class="handle-box">
                        <el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="YYYY-MM-DD">
                        </el-date-picker>
                        <el-button class="search" type="primary" icon="el-icon-search" @click="handleSearch1">搜索</el-button>
                    </div>
                        <el-table :data="tableData1" border stripe>
                            <el-table-column label="#" type="index" />
                            <el-table-column label="登陆时间" sortable prop="createTime" />
                            <el-table-column label="用户名" prop="userName" align="left" />
                            <el-table-column label="IP地址" prop="loginIp" />
                        </el-table>
                        <!-- 分页器 -->
                        <div class="block">
                        <span class="demonstration"></span>
                        <el-pagination layout="total,prev, pager, next,jumper" :total="totalPageNum1" :page-size="pageRequest.pageSize" @current-change="handleCurrentChange" />
                        </div>
                </el-tab-pane>
                <!-- 操作日志 -->
                <el-tab-pane :label="`操作日志`" name="second">
                    <!-- 搜索区域 -->
                    <div class="handle-box">
                        <el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="YYYY-MM-DD">
                        </el-date-picker>
                        <el-button class="search" type="primary" icon="el-icon-search" @click="handleSearch2">搜索</el-button>
                    </div>
                        <el-table :data="tableData2" border stripe>
                            <el-table-column label="#" type="index" />
                            <el-table-column label="操作时间" sortable prop="time" />
                            <el-table-column label="操作描述" prop="remark" align="left" />
                            <el-table-column label="参数类型" prop="parameter" show-overflow-tooltip/>
                            <el-table-column label="请求URL" prop="url" show-overflow-tooltip/>
                        </el-table>
                        <!-- 分页器 -->
                        <div class="block">
                        <span class="demonstration"></span>
                        <el-pagination layout="total,prev, pager, next, jumper" :total="totalPageNum2" :page-size="pageRequest.pageSize" @current-change="handleCurrentChange" />
                        </div>
                </el-tab-pane>
                <!-- 系统日志 -->
                <el-tab-pane :label="`系统日志`" name="third">
                    <!-- 搜索区域 -->
                    <div class="handle-box">
                        <el-date-picker v-model="value" type="date" placeholder="选择日期">
                        </el-date-picker>
                        <el-button class="search" type="primary" icon="el-icon-search" @click="handleSearch3">搜索</el-button>
                    </div>
                        <el-table :data="tableData3" border stripe>
                            <el-table-column label="#" type="index" />
                            <el-table-column label="生成时间" sortable prop="time" />
                            <el-table-column label="文件名" prop="dname" align="left" />
                            <el-table-column label="存放地址" prop="url" show-overflow-tooltip/>
                            <el-table-column label="操作" align="center" >
                                <template v-slot="scope">
                                <el-button size="small" type="primary" icon="el-icon-download" @click="download(scope.row.dname)">下载</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页器 -->
                        <div class="block">
                        <span class="demonstration"></span>
                        <el-pagination layout="total,prev, pager, next, jumper" :total="totalPageNum3" :page-size="pageRequest.pageSize" @current-change="handleCurrentChange" />
                        </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import {} from 'vue';
import request from '../../utils/request'
export default {
	name: 'log',
	data() {
		return {
			value: '',
			activeName: 'first',
			pageRequest: {
				'pageNum': 1,
				'pageSize': 7,
				'like': ''
			},
			totalPageNum1: 0,
			totalPageNum2: 0,
			totalPageNum3: 0,
			tableData1: [],
			tableData2: [],
			tableData3: [],
			input: '',
			downLoad: {
				dname: ''
			}
		}
	},
	created() {
		this.logLogin();
		this.logOperation();
		this.logSystem();
	},
	methods: {
		//获取登录日志
		logLogin() {
			if (this.value) {
				this.pageRequest.like = this.value
				request.post('/api/user-log/select',this.pageRequest).then(res => {
					this.tableData1 = res.data.list
					this.totalPageNum1 = res.data.total
				})
			} else {
				request.post('/api/user-log/find-page',this.pageRequest).then(res => {
					this.tableData1 = res.data.list
					this.totalPageNum1 = res.data.total
				})
			}
		},
		//获取操作日志
		logOperation() {
			if (this.value) {
				this.pageRequest.like = this.value
				request.post('/api/operate-log/select',this.pageRequest).then(res => {
					this.tableData2 = res.data.list
					this.totalPageNum2 = res.data.total
				})
			} else {
				request.post('/api/operate-log/find-page',this.pageRequest).then(res => {
					this.tableData2 = res.data.list
					this.totalPageNum2 = res.data.total
				})
			}
		},
		//获取系统日志
		logSystem() {
			request.post('/api/sys-log/find-page',this.pageRequest).then(res => {
				this.tableData3 = res.data.list
				delete this.tableData3[4]
				this.totalPageNum3 = res.data.total - 1
			})
		},
		// 文件下载
		download(dname) {
			this.downLoad.dname = dname
			request.post('/api/sys-log/download',this.downLoad).then(res => {
				window.open(res.data)
			})
		},
		handleCurrentChange(val) {
			this.pageRequest.pageNum = val
			this.logLogin();
			this.logOperation();
			this.logSystem();
		},
		handleSearch1() {
			if (this.value) {
				this.pageRequest.like = this.value
				request.post('/api/user-log/select',this.pageRequest).then(res => {
					this.tableData1 = res.data.list
					this.totalPageNum1 = res.data.total
				})
			} else {
				this.logLogin()
			}
		},
		handleSearch2() {
			if (this.value) {
				this.pageRequest.like = this.value
				request.post('/api/operate-log/select',this.pageRequest).then(res => {
					this.tableData2 = res.data.list
					this.totalPageNum2 = res.data.total
				})
			} else {
				this.logOperation()
			}
		},
	}
}
</script>

<style scoped>
.mr10 {
    margin-right: 10px;
}

.handle-box {
    margin-bottom: 10px;
    float: left;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.box-card {
    height: 540px;
}
.message-title {
    cursor: pointer;
}
.handle-row {
    margin-top: 30px;
}
.container {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.search {
    margin-left: 20px;
}
</style>

